<template>
    <a-form-item v-if="true!=item['hide']" :label="item['label']" :labelCol="item['labelCol']?{sm: { span: item['labelCol'] }}:{sm: { span: 8 }}" :wrapperCol="item['wrapperCol']?{sm: { span: item['wrapperCol'] }}:{sm: { span: 16 }}">
                <template v-if="isArray(item.field)" >
                   
                    <a-form-item style="margin-bottom:0;" v-for="(f,i) in item.field" :key="i"  :style="formItemStyle">
                        <a-input-group compact>
  
                            <a-input v-if="item['component'][f]==pageSetting.常量.表单组件类型.单行文本"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false" 
                                :style="{ display: 'inline-block' }"
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-date-picker v-else-if="item['component'][f]==pageSetting.常量.表单组件类型.日期选择"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM-DD'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-month-picker v-else-if="item['component'][f]==pageSetting.常量.表单组件类型.月份选择"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"                          
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                            <a-date-picker v-else-if="item['component'][f]==pageSetting.常量.表单组件类型.日期加时间选择"
                                show-time
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'YYYY-MM-DD HH:mm:ss'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"   
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />

                            <LSelect  v-else-if="item.component[f]==pageSetting.常量.表单组件类型.下拉选择"
                                style="width: 100%"
                                :mode="item['mode'] && item['mode'][f]?item['mode']:'default'"
                                :options = "item['options'] && item['options'][f]?item['options'][f]:[]"
                                :dictCode = "item['dictCode'] && item['dictCode'][f]?item['dictCode'][f]:''"
                                :dictParam = "item['dictParam'] && item['dictParam'][f]?item['dictParam'][f]:''"
                                :parentSelect = "item['parentSelect'] && item['parentSelect'][f]?item['parentSelect'][f]:''"
                                :changeItem="changeItem" 
                                :replaceFields = "item['replaceFields'] && item['replaceFields'][f]?item['replaceFields'][f]:{}"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                :field= f
                                :form="form"
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            />
                           
                             <a-time-picker style="width: 100%" show-time v-else-if="item.component[f]==pageSetting.常量.表单组件类型.时间选择"
                                :format="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'HH:mm:ss'"
                                :valueFormat="(item['valueFormat'] && Array.isArray(item['valueFormat']))?item['valueFormat'][i]:'HH:mm:ss'"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"/>

                            <a-input-number style="width: 100%" v-else-if="item.component[f]==pageSetting.常量.表单组件类型.数字输入框"
                                :min="item['min'] && item['min'][f] ? item['min'][f]:-Infinity" 
                                :max="item['max'] && item['max'][f] ? item['max'][f]:Infinity" 
                                :precision="item['precision'] && item['precision'][f]?item['precision'][f]:null" 
                                :step="item['step'] && item['step'][f]? item['step'][f]:1"
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                 v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"/>
                           
                             <!-- <a-switch v-else-if="item.component[f]==pageSetting.常量.表单组件类型.开关" 
                                :checked-children="item.checkedChildren[f]?item.checkedChildren[f]:item['checkedChildren']" 
                                :un-checked-children="item.unCheckedChildren[f]?item.unCheckedChildren[f]:item['unCheckedChildren']" 
                                :disabled="item.component[f]['disabled']?item.component[f]['disabled']:item['disabled']"
                                v-decorator="[f,{rules:StringToJson(item['rules'][f]?item['rules'][f]:item['rules']||[]),initialValue:item['initialValue'][f]?item['initialValue'][f]:item['initialValue']||false ,valuePropName:'checked'}]"/> -->

                            <a-input v-else 
                                :disabled="item['disabled'] && item['disabled'][f]?item['disabled'][f]:false"
                                :style="{ display: 'inline-block' }" 
                                v-decorator="[f,{rules:StringToJson(item['rules']) && StringToJson(item['rules'])[f]?StringToJson(item['rules'])[f]:[],initialValue:item['initialValue'] && item['initialValue'][f]?item['initialValue'][f]:''}]"
                            /> 
                            
                        </a-input-group>
                    </a-form-item>
                   
                </template>
                
                <template v-else>
                    <a-input v-if="item.component==pageSetting.常量.表单组件类型.单行文本" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :addonAfter="item['addonAfter']"
                        :addonBefore="item['addonBefore']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                
                    <a-input-password v-else-if="item.component==pageSetting.常量.表单组件类型.密码" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :addonAfter="item['addonAfter']"
                        :addonBefore="item['addonBefore']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <a-input-search v-else-if="item.component==pageSetting.常量.表单组件类型.输入搜索框" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"
                        @search="onSearch(item.field,form)"
                        enter-button
                    />

                    <a-input-search v-else-if="item.component==pageSetting.常量.表单组件类型.输入选择框" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"
                        @search="onSearch(item.field,form)"
                        onfocus="this.blur();"
                        enter-button
                    />

                    <a-textarea v-else-if="item.component==pageSetting.常量.表单组件类型.多行文本" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        :rows="item['rows'] || 3"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <LSelect  v-else-if="item.component==pageSetting.常量.表单组件类型.下拉选择" 
                        style="width: 100%"
                        :mode="item['mode']"
                        :options = "item['options']"
                        :changeItem="changeItem" 
                        :parentSelect = "item['parentSelect']"
                        :dictCode = "item['dictCode']"
                        :dictParam = "item['dictParam']"
                        :disabled = "item['disabled']"
                        :field= "item['field']"
                        :replaceFields = "item['replaceFields']"
                        :form="form"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                

                    <LSearchSelect  style="width: 100%" v-else-if="item.component==pageSetting.常量.表单组件类型.下拉搜索" 
                        :replaceFields = "item['replaceFields']"
                        :currentParam = "item['currentParam'] || item['field']"
                        :changeItem="changeItem" 
                        :parentSelect="item['parentSelect']"
                        :field="item['field']"
                        :param="item['param']"
                        :paramFormField="item['paramFormField']"
                        :url="item['url']"
                        :method = "item['method']"
                        :disabled = "item['disabled']"
                        :mode="item['mode']"
                        :form="form"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                    <LTreeSelect v-else-if="item.component==pageSetting.常量.表单组件类型.树选择" 
                        style="width: 100%"
                        :dictCode="item.dictCode"
                        :dictParam = "item['dictParam']"
                        :disabled="item['disabled']"
                        :treeCheckable = "item['treeCheckable']"
                        :showCheckedStrategy = "item['showCheckedStrategy']"
                        :treeCheckStrictly = "item['treeCheckStrictly']"
                        :multiple="item['multiple']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                

                    <!-- <a-input style="width: 100%" v-else-if="item.component==pageSetting.常量.表单组件类型.图标选择"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]">
                        <a-icon v-if="!item['disabled']" @click="handlerIconSelect(item.field,form)" slot="addonAfter" type="setting" /> 
                    </a-input> -->

                    <a-input-search v-else-if="item.component==pageSetting.常量.表单组件类型.图标选择" 
                        style="width: 100%"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"
                        @search="handlerIconSelect(item.field,form)"
                        onfocus="this.blur();"
                        enter-button
                    />

                    <a-input-number style="width: 100%" v-else-if="item.component==pageSetting.常量.表单组件类型.数字输入框"
                        :min="item['min']" 
                        :max="item['max']" 
                        :precision="item['precision']" 
                        :step="item['step'] || 1"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                

                    <a-date-picker style="width: 100%" v-else-if="item.component==pageSetting.常量.表单组件类型.日期选择"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM-DD'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>
                    
                    <a-month-picker style="width: 100%" v-else-if="item.component==pageSetting.常量.表单组件类型.月份选择"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <a-date-picker style="width: 100%" show-time v-else-if="item.component==pageSetting.常量.表单组件类型.日期加时间选择"
                        :valueFormat="item['valueFormat'] || 'YYYY-MM-DD HH:mm:ss'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <a-time-picker style="width: 100%" show-time v-else-if="item.component==pageSetting.常量.表单组件类型.时间选择"
                        :valueFormat="item['valueFormat'] || 'HH:mm:ss'"
                        :format="item['valueFormat'] || 'HH:mm:ss'"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <a-switch v-else-if="item.component==pageSetting.常量.表单组件类型.开关" 
                        :checked-children="item['checkedChildren']" 
                        :un-checked-children="item['unCheckedChildren']" 
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']||false,valuePropName:'checked'}]"/>


                    <a-radio-group v-else-if="item.component==pageSetting.常量.表单组件类型.单选框" 
                        :options="StringToJson(item['options'])" 
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <a-rate v-else-if="item.component==pageSetting.常量.表单组件类型.评分" allow-half 
                        :count="item['count']"
                        :disabled="item['disabled']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <LImageUpload v-else-if="item.component==pageSetting.常量.表单组件类型.图片上传" 
                        :data="item['data']"
                        :field="item['field']"
                        :listType="item['listType']"
                        :disabled="item['disabled']"
                        :count="item['count']"
                        :form="form"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <LFileUpload v-else-if="item.component==pageSetting.常量.表单组件类型.文件上传" 
                        :data="item['data']"
                        :field = "item['field']"
                        :disabled = "item['disabled']"
                        :count = "item['count']"
                        :form="form"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/>

                    <Ltinymce v-else-if="item.component==pageSetting.常量.表单组件类型.富文本" 
                        :form="form" 
                        :model="item['model']" 
                        :field="item['field']" 
                        :height="item['height']" 
                        :width="item['width']"
                        :content="item['content']"/>

                    <Ltimeline v-else-if="item.component==pageSetting.常量.表单组件类型.时间轴" 
                        :height="item['height']" 
                        :items="item['items']"
                        :itemField="item['itemField']"/>

                    <!-- <LFormAceEditor v-else-if="item.component==pageSetting.常量.表单组件类型.代码编辑器"
                        :form="form" 
                        :disabled = "item['disabled']"
                        :field = "item['field']"
                        :width="item['width']"
                        :height="item['height']"
                        :lang="item['lang']"
                        :theme="item['theme']"
                        :content="item['content']"
                        v-decorator="[item.field,{rules:StringToJson(item['rules']),initialValue:item['initialValue']}]"/> -->
                        
                 
                </template>
            </a-form-item>
</template>

<script>
import LSelect from '@/components/lt/LSelect.vue'
import LTreeSelect from '@/components/lt/LTreeSelect.vue'
import LImageUpload from '@/components/lt/LImageUpload.vue'
import LFileUpload from '@/components/lt/LFileUpload.vue'
import LSearchSelect from '@/components/lt/LSearchSelect.vue'
import Ltinymce from '@/components/lt/Ltinymce.vue'
import Ltimeline from '@/components/lt/Ltimeline.vue'
import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import LFormAceEditor from '@/components/lt/LFormAceEditor'
import {StringToJson} from '@/utils/util'


export default {
    name:'formItem',
    components:{LSelect,LTreeSelect,LImageUpload,LFileUpload,LSearchSelect,Ltinymce,Ltimeline,LFormAceEditor},
    data(){
        return{
            pageSetting,
           //如果是多个组件在一起，动态样式
            formItemStyle:{display:'inline-block' }
        }
    },
    created(){
        if(this.item && Array.isArray(this.item.field)){
            this.formItemStyle={display:'inline-block',width:'calc('+(100/this.item.field.length)+'%)'} 
        }
        
    },
    props:{
        item:{
            type:Object,
            default:()=>{}
        },
        changeItem:{
            type:Object,
            default:()=>{}
        },
        form:{
            type:Object,
            default:()=>{} 
        },
        formRef:{
            type:[String,Number],
            default:'LForm'
        }
       
        
    },
    methods:{
        handlerIconSelect(field,form){
          //  this.$parent.$parent.$parent.$parent.$parent.$refs.liconSelect.show(field,form) 
          this.$emit("showIconSelect",field,form)
        //   this.getParent(this.formRef).$refs.liconSelect.show(field,form) 
        },
        isArray(obj){
            return Object.prototype.toString.call(obj) === '[object Array]';
        },
        isObject(obj) {
            return Object.prototype.toString.call(obj) === '[object Object]';
        },
        StringToJson(str){
            if(str){
              str =  StringToJson(str)
            }
            return str
        },
        getParent(componentName){
            let parent = this.$parent;
            let name = this.$parent.$options.name;
            while (parent && (!name || componentName!=name)) {
                parent = parent.$parent;
                if (parent) name = parent.$options.name;
            }
            return parent;
        },
        onSearch(field,form){
            this.$emit("clickEventHandler",field,form)
            // this.getParent(this.formRef).clickEventHandler(field,form)
            
        },
        onSearchKeyUp(field,form){
            form.setFieldsValue({[`${field}`]:''})
        },
        
    }
}

</script>
